<template>
  <div :bordered="false">

    <div class="app-home-box">
      <!-- 我的代办 -->
      <div class="app-process">
        <div class="app-my-todo">
          <a-row class="app-process-btn" type="flex">
            <a-col :span="12" class="mt-icon">
              <a-icon type="bell" theme="twoTone"/>
            </a-col>
            <a-col :span="12">
              <div class="mt-title">我的代办</div>
              <div class="mt-value">{{0}}</div>
            </a-col>
          </a-row>
        </div>
        <div class="app-flow-steps">
          <a-row type="flex" justify="space-around" align="middle">
            <a-col :span="3">
              <div class="app-steps-item">
                <div class="app-steps-item-icon">
                  <a-icon type="play-circle" theme="twoTone"/>
                </div>
                <span class="app-steps-item-title">我发起的</span>
              </div>
            </a-col>
            <a-col :span="3">
              <div class="app-steps-item">
                <div class="app-steps-item-icon">
                  <a-icon type="carry-out" theme="twoTone"/>
                </div>
                <span class="app-steps-item-title">我处理的</span>
              </div>
            </a-col>
            <a-col :span="3">
              <div class="app-steps-item">
                <div class="app-steps-item-icon">
                  <a-icon type="sound" theme="twoTone"/>
                </div>
                <span class="app-steps-item-title">抄送我的</span></div>
            </a-col>
            <a-col :span="3">
              <div class="app-steps-item">
                <div class="app-steps-item-icon">
                  <a-icon type="file-add" theme="twoTone"/>
                </div>
                <span class="app-steps-item-title">发起新流程</span></div>
            </a-col>
          </a-row>
        </div>
      </div>
      <!-- 全部应用 -->
      <a-card class="app-list-card" title="全部应用">
        <div slot="extra">
          <a-button icon="plus" type="primary" shape="round" @click="onCreateApp">创建应用</a-button>
        </div>

        <div class="app-group-box">
          <div class="app-group-item" v-for="group of groupList">
            <div class="group-label">
              <span @click="()=>onGroupRename(group)" title="重命名分组">{{group.label}}</span>
            </div>
            <draggable
              :class="{'app-list':true,dragging}"
              v-model="group.list"
              handle=".app-item"
              :animation="200"
              ghost-class="app-item-ghost"
              @start="onDraggableStart"
              @end="e=>onDraggableEnd(e,group.list)">
              <transition-group type="app-item-transition" :name="!dragging ? 'app-item' : null">
                <template v-for="item of group.list">
                  <low-app-list-item :key="item.id" :item="item" @click="onOpenApp(item)" @deleted="loadData" @menu-click="e=>onItemMenuClick(e,item)"/>
                </template>
              </transition-group>
            </draggable>
          </div>
        </div>

        <a-empty v-if="groupList.length === 0" description="暂无应用" style="margin-bottom: 12px;"/>
      </a-card>
    </div>

    <low-app-modal ref="modalForm" @ok="loadData"/>
    <low-app-move-group-modal :labelList="labelList" ref="moveGroup" @ok="loadData"/>
  </div>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { getAction, putAction } from '@api/manage'
import Draggable from 'vuedraggable'
import LowAppModal from './modules/LowAppModal'
import LowAppListItem from './components/LowAppListItem'
import LowAppMoveGroupModal from './modules/LowAppMoveGroupModal'

export default {
  name: 'LowAppHome',
  components: {
    LowAppMoveGroupModal,
    Draggable,
    LowAppListItem,
    LowAppModal
  },
  data() {
    return {
      description: 'LowApp应用主页',
      loading: false,
      // 是否正在拖拽中
      dragging: false,
      groupList: [],
      labelList: [],
      url: {
        list: '/online/lowApp/list',
        groupRename: '/online/lowApp/groupRename',
        listByGroup: '/online/lowApp/listByGroup',
        editBatch: '/online/lowApp/editBatch',
      },
    }
  },
  created() {
    this.loadData()
  },
  methods: {

    loadData() {
      this.loading = true
      getAction(this.url.listByGroup, {}).then((res) => {
        if (res.success) {
          this.labelList = res.result.labelList
          this.groupList = res.result.groupList
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => this.loading = false)
    },

    // 创建应用
    onCreateApp() {
      this.$refs.modalForm.add()
      this.$refs.modalForm.title = '创建应用'
      this.$refs.modalForm.disableSubmit = false
    },
    onEditApp(record) {
      this.$refs.modalForm.edit(record)
      this.$refs.modalForm.title = '编辑应用'
      this.$refs.modalForm.disableSubmit = false
    },
    // 打开应用
    onOpenApp(record) {
      window.open(`/app/${record.id}`)
    },
    onItemMenuClick(e, record) {
      if (e.key === 'move-group') {
        this.$refs.moveGroup.show(record)
      } else if (e.key === 'edit-item') {
        this.onEditApp(record)
      }
    },
    // 分组重命名 o2ulDNOXGwvBRndehxW14dML+i/qxuVry2u3TXIhR9CrYEbhZi7RywQnYojV/SgC/PffdTE3WKU0/u0CXtgFzw==
    onGroupRename(group) {
      this.$JPrompt({
        title: '重命名分组',
        defaultValue: group.label,
        placeholder: '请输入分组名称',
        rule: [
          {required: true, message: '分组名称不能为空！'},
          {max: 10, message: '分组名称不能超过10个字符！'}
        ],
        onOkAsync: (event) => {
          let params = {
            newLabel: event.value,
            oldLabel: group.label
          }
          if (params.newLabel === params.oldLabel) {
            this.$message.warning('请输入新分组名')
            return
          }
          event.target.showLoading()
          putAction(this.url.groupRename, params).then((res) => {
            if (res.success) {
              this.$message.success(res.message)
              event.target.forceClose()
              this.loadData()
            } else {
              this.$message.warning(res.message)
            }
          }).finally(() => event.target.hideLoading())
        },
      })
    },

    // 拖拽开始事件
    onDraggableStart(event) {
      this.dragging = true
    },
    // 拖拽结束事件
    onDraggableEnd(event, list) {
      this.dragging = false
      let {oldIndex, newIndex} = event
      // 新老下标不一致，则说明顺序发生了变化，需要更新到后台
      if (oldIndex !== newIndex) {
        let formData = []
        list.forEach((record, index) => {
          // 只更新orderNum变化的数据
          if (record.orderNum !== index) {
            formData.push({id: record.id, orderNum: index})
          }
        })
        putAction(this.url.editBatch, formData).then(res => {
          if (!res.success) {
            console.warn('排序失败：', res)
            this.$message.warning('排序失败')
          }
          this.loadData()
        })
      }
    },
  }
}
</script>
<style scoped lang="less">
.app-home-box {

  /*padding: 20px 0 0;*/

  .app-process,
  .app-list-card {
    width: 1500px;
    margin: 0 auto 20px;
    transition: width 0.3s;
  }

  .app-process {
    white-space: nowrap;

    .app-my-todo,
    .app-flow-steps {
      height: 120px;
      background-color: white;
      display: inline-block;
      vertical-align: top;
    }

    .app-my-todo {
      width: 490px;
      margin-right: 20px;
      padding: 10px 20px;
      transition: width 0.3s, margin 0.3s;

      .app-process-btn {
        height: 100%;
        cursor: pointer;
        border-radius: 4px;

        &:hover {
          background-color: #f5f4f3;
        }

        .mt-icon {
          text-align: center;
          line-height: 100px;
          font-size: 42px;
        }

        .mt-title {
          font-size: 18px;
          padding: 10px 0 0 0;
        }

        .mt-value {
          font-size: 32px;
          font-weight: bold;
        }
      }

    }

    .app-flow-steps {
      width: 990px;
      transition: width 0.3s;
    }

    .app-flow-steps {
      /deep/ .ant-row-flex {
        height: 100%;

        .ant-col {
          height: 100%;
          padding: 12px 0;

          .app-steps-item {
            height: 100%;
            cursor: pointer;
            border-radius: 10px;
            text-align: center;
            padding: 8px 0;

            &:hover {
              background-color: #f5f4f3;
            }

            .app-steps-item-icon {
              font-size: 32px;
              margin-bottom: 4px;
            }

            .app-steps-item-title {
              font-size: 16px;
            }
          }
        }
      }
    }

  }

  .app-list {
    // 拖拽影子样式
    .app-item-ghost {
      opacity: 0.5;
      background: #c8ebfb !important;
    }

    // 正在拖拽中时覆盖app-item的样式
    &.dragging /deep/ .app-item {
      &:hover,
      &.active {
        background-color: transparent;

        .app-item-setting {
          display: none;
        }
      }
    }

    .app-item-move {
      transition: transform 0.5s;
    }

    .no-move {
      transition: transform 0s;
    }
  }

  .app-group-item .group-label {
    font-size: 16px;
    margin: 8px 0;

    span {
      cursor: pointer;

      &:hover {
        color: #999999;
      }
    }
  }

  /* begin 小屏幕适配 */
  @media (max-width: 1750px) {
    @box-width: 1300px;
    .app-process,
    .app-list-card {
      width: @box-width;
    }

    .app-process {
      @todo-width: 290px;

      .app-my-todo {
        width: @todo-width;
        margin-right: 10px;
      }

      .app-flow-steps {
        width: @box-width - @todo-width - 10px;
      }
    }
  }

  @media (max-width: 1550px) {
    @box-width: 1100px;
    .app-process,
    .app-list-card {
      width: @box-width;
    }

    .app-process {
      @todo-width: 290px;

      .app-my-todo {
        width: @todo-width;
      }

      .app-flow-steps {
        width: @box-width - @todo-width - 10px;
      }
    }
  }


  @media (max-width: 1350px) {
    @box-width: 1000px;
    .app-process,
    .app-list-card {
      width: @box-width;
    }

    .app-process {
      @todo-width: 270px;

      .app-my-todo {
        width: @todo-width;
      }

      .app-flow-steps {
        width: @box-width - @todo-width - 10px;
      }
    }
  }

  @media (max-width: 1250px) {
    @box-width: 900px;
    .app-process,
    .app-list-card {
      width: @box-width;
    }

    .app-process {
      @todo-width: 240px;

      .app-my-todo {
        width: @todo-width;
      }

      .app-flow-steps {
        width: @box-width - @todo-width - 10px;
      }
    }
  }

  @media (max-width: 1150px) {
    @box-width: 800px;
    .app-process,
    .app-list-card {
      width: @box-width;
    }

    .app-process {
      @todo-width: 220px;

      .app-my-todo {
        width: @todo-width;
      }

      .app-flow-steps {
        width: @box-width - @todo-width - 10px;
      }
    }

    .app-list /deep/ .app-item {
      width: 180px;
      margin: 0;
    }
  }

  @media (max-width: 1088px) {
    @box-width: 100%;
    .app-process,
    .app-list-card {
      width: @box-width;
    }

    .app-process {
      @todo-width: 200px;

      .app-my-todo {
        width: @todo-width;
      }

      .app-flow-steps {
        width: calc(@box-width - @todo-width - 10px);
      }
    }
  }
  /* end 小屏幕适配 */

}


</style>
